<template>
	<view class="page">
		<view class="list">
			<view class="item flex-box align-center p-re" v-for="(itm,i) in list" :key='i'
				@click="switchStore(itm.shop_id,itm.uid)">
				<view class="avatar-box">
					<image @error="itm.logo=''" :src="itm.logo?$imgUrls(itm.logo):'/static/head.png'" class="avatar"
						mode=""></image>
				</view>
				<view class="flex">
					<view class="lines name">{{ itm.name }}</view>
					<view class="address">{{ itm.name }}</view>
					<view class="address">{{ itm.address }}</view>
					<text class="id">ID {{ itm.shop_id }}</text>
				</view>
				<text class="iconfont icon-more"></text>
				<view class="Unbundling" @click.stop="Unbundling(itm.shop_id,itm.uid,i)">解绑</view>
			</view>
		</view>
		<empty type='1' v-if='noData' msg='还没有绑定任何店铺哦'></empty>
		<view class="mask" v-if='showLogin' @click="showLogin = false">
			<view class="login-box" @click.stop>
				<view class="flex-box flex-between title">
					<text @click="showLogin = false">取消</text>
					<text @click="login">确定</text>
				</view>
				<view class="form-box">
					<input type="text" v-model="username" placeholder="请输入管理账号" placeholder-class="pla" />
					<input type="password" v-model="password" placeholder="请输入管理密码" placeholder-class="pla" />
				</view>
			</view>

		</view>

		<view class="add-box flex-box flex-center align-center" @click="showLogin = true"></view>


	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	var that;
	export default {
		data() {
			return {
				username: '',
				password: '',
				showLogin: false,
				list: [],
				noData: false,
				testStart: 0,

			};
		},
		onLoad(e) {
			that = this;
			if (e.testStart) {
				that.testStart = e.testStart;
			}
		},
		onShow() {
			that = this
			that.getStore()
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods: {
			...mapMutations(['updateDate']),
			Unbundling(shop_id, uid, i) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: "是否确认解绑当前门店",
					success: (res) => {
						if (res.confirm) {
							that.$http.post({
								url: '/singleSaleManageApi/unbind_store',
								data: {
									shop_id: shop_id,
									uid: uid,
								}
							}).then(res => {
								if (res.code == "200") {
									that.list.splice(i, 1);
									this.$set(this.list, this.list[i], this.list[i]);
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
									if (that.list.length == 0) {
										that.noData = true;
									}
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						}
					}

				})
			},




			login() {
				if (!that.username.trim()) {
					uni.showToast({
						title: '请输入管理账号',
						icon: 'none'
					})
					return
				}
				if (!that.password.trim()) {
					uni.showToast({
						title: '请输入管理密码',
						icon: 'none'
					})
					return
				}
				that.$http.post({
					url: '/singleSaleManageApi/manageLogin',
					data: {
						uname: that.username,
						upass: that.password,
					}
				}).then(res => {
					if (res.code == 200) {
						uni.reLaunch({
							url: '/pages/login/code?uname=' + that.username + '&upass=' + that.password +
								'&uid=' + res.data.uid + '&tel=' + res.data.tel
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			switchStore(shop_id, uid) {
				uni.setStorageSync('store_id', shop_id);
				const Obj = {
					shop_id,
					uid
				}
				this.updateDate(Obj);
				uni.setStorageSync('uid', uid);
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			getStore() {
				that.$http.post({
					url: '/singleSaleManageApi/getStore',
				}).then(res => {
					if (res.code == 200 && res.data) {
						that.list = res.data;
						if (that.list.length == 1 && that.testStart ==
							0) { // 只有一个门店的时候直接进入index页面	
							const Obj = {
								shop_id: that.list[0].shop_id,
								uid: that.list[0].uid
							}
							this.updateDate(Obj);
							uni.setStorage({
								key: 'store_id',
								data: that.list[0].shop_id,
								success() {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}
							})

						}
					}
					if (!that.list || that.list.length < 1) {
						that.noData = true
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.list {
			padding: $page-space;

			.item {
				background-color: $fff;
				border-radius: $border-radius-lg;
				padding: 24rpx;
				margin-bottom: $page-space;

				.avatar-box {
					align-self: flex-start;

					.avatar {
						height: 92rpx;
						width: 92rpx;
						border-radius: 50%;
						border: 2rpx solid #EFEFEF;
						margin-right: 20rpx;
					}
				}

				.name {
					font-weight: 600;
					font-size: $font-size-lg;
				}

				.address {
					color: $color-text-aid;
					margin-top: 20rpx;
				}

				.id {
					line-height: 32rpx;
					background-color: $uni-color-primary;
					color: white;
					padding: 0 10rpx;
					border-radius: 4rpx;
					margin-top: 20rpx;
					display: inline-block;
				}
			}
		}

		.add-box {
			position: fixed;
			left: 50%;
			bottom: 28rpx;
			width: 84rpx;
			height: 84rpx;
			background-color: #FFFFFF;
			border-radius: 50%;
			z-index: 3;
			margin-left: -42rpx;

			&::before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 40rpx;
				height: 4rpx;
				border-radius: 4rpx;
				background-color: $uni-color-primary;
			}

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				height: 40rpx;
				width: 4rpx;
				border-radius: 4rpx;
				background-color: $uni-color-primary;
			}
		}

		.login-box {
			position: absolute;
			width: 100%;
			bottom: 0;
			height: 0;
			background-color: #FFFFFF;
			border-radius: $border-radius-base $border-radius-base 0 0;

			@keyframes show {
				0% {
					height: 0;
				}

				100% {
					height: 600rpx;
				}
			}

			animation: show .2s linear forwards;

			.title {
				padding: 24rpx;
				border-bottom: 1px solid #E5E5E5;

				text {
					font-size: 30rpx;

					&:nth-child(1) {
						color: #5D5D5D;
					}

					&:nth-child(2) {
						color: $uni-color-primary;
					}
				}
			}

			.form-box {
				padding: 116rpx 88rpx 0;

				input {
					background: #F5F5F5;
					margin-bottom: 40rpx;
					outline: none;
					height: 88rpx;
					padding: 0 30rpx;
					border-radius: $border-radius-base;
				}
			}
		}

		.p-re {
			position: relative;
		}

		.Unbundling {
			border: 2rpx solid #FF784A;
			padding: 6rpx 20rpx;
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			border-radius: 10rpx;
			background: #FFFFFF;
		}


	}
</style>